<template>
	<view>
		<view class="goodsList" v-for="item in categoryList">
			<h3>{{item.name}}</h3>
			<view class="goods" v-for="gitem in item.goodsList">
				<u-image class="img" showLoading width="70%" height="70%" :src="gitem.list_pic_url">
				</u-image>
				<view class="text">{{gitem.name}}</view>
				<view class="text price">￥{{gitem.retail_price.toFixed(2)}} 元</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "indexGoodsList",
		props: {
			categoryList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.goodsList {
		width: 750rpx;
		margin-top: 20rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		text-align: center;

		h3 {
			display: inline-block;
			width: 750rpx;
			margin: 50rpx 0;
			font-size: 20px;
		}

		.goods {
			width: 350rpx;
			height: 500rpx;
			margin-left: 20rpx;

			.img {
				margin: 0 auto;
			}

			.text {
				margin-top: 20rpx;
			}

			.price {
				color: #550000;
			}
		}
	}
</style>
